import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Space, } from 'antd';
import { order_status, goodsType_status, workType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import Detail from './components/detail'
import { useUpdateEffect } from 'ahooks';
import Indentation from '@/components/Indentation'
const OrderList = (props) => {
  const { loading, dispatch, list, history, departmentList, teamList } =
    props;
  const { location } = history;
  const { query } = location;
  const { accessId } = query
  const childRef = useRef();
  const [visible, setVisible] = useState(false);
  const [organizationAuthAdminList, setOrganizationAuthAdminList] = useState([])
  const [active, setActive] = useState('')
  console.log(props)
  useEffect(() => {
  }, []);
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  useUpdateEffect(() => {
    handleCallback()
  }, [active])
  const filterList = (list) => {
    return list.map((item) => {
      const { departmentName: label, qywxDepartmentId: value, subDepartmentList: children } = item;
      const localItem = {
        label,
        value,
        children: children ? filterList(children) : undefined,
      };
      return localItem;
    });
  };
  const onChange = (e) => {
    setActive(e.target.value);
  };
  const searchItems = [
    {
      label: '订单编号',
      name: 'orderSn',
    },
    {
      label: '用户姓名或手机',
      name: 'keyword',
    },
    {
      label: '创建时间',
      type: 'rangePicker',
      name: 'createStartTime',
      end: 'createEndTime',
    },
  ];
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '手机',
      dataIndex: 'mobile',
    },
    {
      title: '订单时间',
      dataIndex: 'createTime',
    },
    {
      title: '订单信息',
      dataIndex: 'orderDesc',
      render: (e) => {
        const goods = e ? JSON.parse(e) : {}
        const { goodsCover, goodsName } = goods
        return <Indentation str={goodsName}></Indentation>
      }
    },
    {
      title: '订单编号',
      dataIndex: 'orderSn',
    },
    {
      title: '订单类型',
      dataIndex: 'orderType',
      render: (e) => {
        return goodsType_status[e]
      },
    },
    {
      title: '创建人',
      dataIndex: 'addAdminName',
    },
    {
      title: '应收',
      dataIndex: 'payFee',
    }, {
      title: '实收',
      dataIndex: 'realPayFee',
    },
    {
      title: '欠费',
      dataIndex: 'remainMoney',
    },
    {
      title: '超额优惠',
      dataIndex: 'additionalDiscounts',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return order_status[e]
      },
    },
    {
      title: '商品数量',
      dataIndex: 'goodsAmount',
    },
    {
      title: '支付时间',
      dataIndex: 'payTime',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '审核',
          click: () => {
            history.push({
              pathname: '/order/orderDetails',
              query: {
                orderSn: record.orderSn,
                accessId,
                linkType: 'checkOrder'
              }
            })
          },
        },
      ],
    },
  ];
  const fetchOrderDetail = (orderSn) => {
    dispatch({
      type: 'order/fetchOrderDetail',
      payload: {
        orderSn: orderSn,
      },
      callback: (e, record) => {
        setVisible({ show: true, detail: record })
      }
    });
  }

  return (
    <Card title='待审核的订单'>
      <Row gutter={[0, 12]}>
        {/* <Col span={24}>
          <Radio.Group
            value={active}
            onChange={onChange}
            style={{
              marginBottom: 16,
            }}
          >
            {TabList.map((item, index) => {
              return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
            })}
          </Radio.Group>
        </Col> */}
        <Col span={24}>
          <TableDataBlock
            params={{ status: active }}
            cRef={childRef}
            loading={loading}
            searchItems={searchItems}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            dispatchType="order/fetchSearchToCheckOrder"
            {...list}
          ></TableDataBlock>
        </Col>
        <Detail handleCallback={handleCallback} visible={visible} onClose={() => setVisible(false)}></Detail>
      </Row>
    </Card>


  );
};

export default connect(({ order, }) => ({
  list: order.orderCheckList,
}))(OrderList);
